<template>
  <div id="app">
    <!-- 页面的头部 -->
    <div class="header">
      <div class="logo"></div>
      <div class="desc">新型冠状病毒肺炎</div>
      <div class="desc_data">疫情实时大数据报告</div>
      <div class="looks">共{{looks.toLocaleString()}}人浏览</div>
      <div class="toArea">
        <span>切换地区</span>
        <i></i>
      </div>
    </div>
    <!-- 切换按钮 -->
    <div class="page_change">
      <!-- 粘性布局 -->
      <van-sticky>
        <van-tabs @change='countryChange' v-model="active" title-active-color='#10aeb5'>
          <van-tab title="国内疫情"></van-tab>
          <van-tab title="国外疫情"></van-tab>
        </van-tabs>
      </van-sticky>
    </div>

    <!-- 疫情地图 -->
    <div class="data_map" style="height:800px;" v-if='tag_'>
      <!-- 截止时间 -->
      <div class="end_time">
        <div>国内疫情</div>
        <div>
          <div>数据更新至{{endTime}}</div>
          <div><i style="background-image:url('https://mms-res.cdn.bcebos.com/mms-res/voicefe/captain/mola/Virus/1.1.287/assets/question-mark.f7b4fec.png');height:12px;width:12px;background-size:100% 100%;display: inline-block;margin-right:5px;"></i>数据说明</div>
        </div>
      </div>
      <!-- 数据列表 -->
      <div class="data_list">
        <van-row>
          <van-col span="8">
            <div>累计确诊<i style="background-image:url('https://mms-res.cdn.bcebos.com/mms-res/voicefe/captain/mola/Virus/1.1.287/assets/question-mark.f7b4fec.png');height:12px;width:12px;background-size:100% 100%;display: inline-block;margin-left:5px;"></i></div>
            <div class="num_color">{{total_confirmed}}</div>
          </van-col>
          <van-col span="8">
            <div>累计疑似</div>
            <div class="num_color">{{total_suspected}}</div>
          </van-col>
          <van-col span="8">
            <div>累计死亡</div>
            <div class="num_color">{{total_dead}}</div>
          </van-col>
        </van-row>
        <van-row>
          <van-col span="8">
            <div>累计治愈</div>
            <div class="num_color">{{total_cure}}</div>
          </van-col>
          <van-col span="8">
            <div>现有确诊</div>
            <div class="num_color">{{total_severe}}</div>
          </van-col>
          <van-col span="8">
            <div>境外输入</div>
            <div class="num_color">{{total_outside}}</div>
          </van-col>
        </van-row>
      </div>

      <!-- 中国地图 -->
      <div class="china_map">
        <!-- 切换按钮 -->
        <van-tabs @click='dataChange' title-active-color='#10aeb5'>
          <van-tab title="现有确诊"></van-tab>
          <van-tab title="累计确诊"></van-tab>
        </van-tabs>
        <!-- 地图容器 -->
        <div id="main" style="height:300px;width:100%;">

        </div>
      </div>

      <!-- 柱状图 -->
      <div class="bar">
        <div id="data_bar" style="height:300px;width:100%;"></div>
      </div>
{{bar_data}}
      <!-- 数据表格 -->
      <div class="data_table">
        <div class="table_title">国内各地区疫情统计汇总<i style="background-image:url('https://mms-res.cdn.bcebos.com/mms-res/voicefe/captain/mola/Virus/1.1.287/assets/question-mark.f7b4fec.png');height:12px;width:12px;background-size:100% 100%;display: inline-block;margin-left:5px;"></i></div>
        <div class="table_tag">7:00-10:00为更新高峰，数据若滞后敬请谅解</div>
        <div class="wrap">
          <van-row>
            <van-col span="6">疫情地区</van-col>
            <van-col span="4">新增</van-col>
            <van-col span="4">现有</van-col>
            <van-col span="3">累计</van-col>
            <van-col span="4">治愈</van-col>
            <van-col span="3">死亡</van-col>
          </van-row>
          <van-row>
            <van-col span="6">上海</van-col>
            <van-col span="4">100</van-col>
            <van-col span="4">1000</van-col>
            <van-col span="3">1000</van-col>
            <van-col span="4">100</van-col>
            <van-col span="3">100</van-col>
          </van-row>
          <van-row>
            <van-col span="6">上海</van-col>
            <van-col span="4">100</van-col>
            <van-col span="4">1000</van-col>
            <van-col span="3">1000</van-col>
            <van-col span="4">100</van-col>
            <van-col span="3">100</van-col>
          </van-row>
        </div>
      </div>

      <div style="height:200px;"></div>
    </div>

    <div class="data_map" style="height:800px;" v-else>
      国外数据
    </div>
  </div>
</template>

<script>
// 导入axios
import axios from './http/axios'
// 导入moment
import moment from 'moment'
export default {
  data() {
    return {
      active:1,
      tag_:true,
      looks:0,
      endTime:0,
      total_confirmed:0,
      total_dead:0,
      total_suspected:0,
      total_cure:0,
      total_severe:0,
      total_outside:0,
      new_data:[],
      bar_data:{}
    }
  },
  created() {
    this.login()
    this.all_looks()
    this.end_time()
    this.findData(0)
  },
  mounted() {
    // 定时器，规定多少秒之后执行某代码
    setTimeout(()=>{
      this.initEchart()
      this.init_bar()
    },2000)
  },
  watch: {
    // 只要new_data发生变化时，就去重新绘制地图
    new_data:{
      handler:function() {
        this.initEchart()
      },
      deep:true // 深度监听
    }
  },
  methods: {
    // 绘制柱状图
    init_bar() {
      var myChart = echarts.init(document.getElementById('data_bar'));
      var option = {
        xAxis: {
            type: 'category',
            data: this.bar_data.name
        },
        yAxis: {
            type: 'value'
        },
        series: [{
            data: this.bar_data.value,
            type: 'bar',
            showBackground: true,
            backgroundStyle: {
                color: 'rgba(220, 220, 220, 0.8)'
            }
        }]
      };
      myChart.setOption(option);
    },
    // 现有确诊和累计确诊数据的切换
    dataChange(name) {
      this.findData(name)
    },
    // 查询中国所有省的数据
    findData(name) {
      axios({
          url:'/test/news/wap/fymap2020_data.d.json',
          method:'GET'
      }).then((res)=>{
          // 将查询到结果转换成dataList一样的格式[{name:'',value:''}]

          // map是数组的api(方法)，可以用来映射数组，也就是将数组换一种方式显示
          this.new_data = res.data.data.list.map((item)=>{
            if(name == 0) {
              // 现有确诊
              return {
                  name:item.name, // item是被遍历数组中的每一项
                  value:item.econNum
              }
            } else {
              // 累计确诊
              return {
                  name:item.name, // item是被遍历数组中的每一项
                  value:item.value
              }
            }
          })
      })
    },
    // 绘制中国地图
    initEchart() {
      // 获取容器
      var myChart = echarts.init(document.getElementById('main'));
      var option = {
          // 提示框
          tooltip: {
              //数据格式化
              formatter:function(params, callback){
                  return params.seriesName+'<br />'+params.name+'：'+params.value
              }
          },
          // 视觉设置
          visualMap: {
              min: 0,
              max: 500,
              left: 'left',
              top: 'bottom',
              text: ['高','低'],//取值范围的文字
              inRange: {
                  color: ['#e0ffff', 'red']//取值范围的颜色
              },
              show:true//图注
          },
          geo: {
              map: 'china',
              roam: false,//不开启缩放和平移
              zoom:1.23,//视角缩放比例
              label: {
                  normal: {
                      show: true,
                      fontSize:'10',
                      color: 'rgba(0,0,0,0.7)'
                  }
              },
              itemStyle: {
                  normal:{
                      borderColor: 'rgba(0, 0, 0, 0.2)'
                  },
                  emphasis:{
                      areaColor: 'yellow',//鼠标选择区域颜色
                      shadowOffsetX: 0,
                      shadowOffsetY: 0,
                      shadowBlur: 20,
                      borderWidth: 0,
                      shadowColor: 'rgba(0, 0, 0, 0.5)'
                  }
              }
          },
          // 鼠标悬浮提示框
          series : [
              {
                  name: '省份',
                  type: 'map',
                  geoIndex: 0,
                  data:this.new_data
              }
          ]
      };
      myChart.setOption(option);
    },
    // 截止时间
    end_time() {
      axios({
        url:'http://39.96.21.48:8001/epidemic/pageQuery',
        method:'get',
        params:{page:1,pageSize:1000}
      }).then((res)=>{
        this.endTime = moment(res.data.data.list[0].inputTime).format('YYYY-MM-DD HH:mm:ss')

        // 遍历数组，将总人数累加
        res.data.data.list.forEach((item)=>{
          // 累计确诊
          this.total_confirmed += item.confirmed
          //等价于 this.total_confirmed = this.total_confirmed + item.confirmed

          // 累计死亡
          this.total_dead += item.dead

          // 累计疑似
          this.total_suspected += item.suspected

          // 累计治愈
          this.total_cure += item.cure

          // 现有确诊
          this.total_severe += item.severe

          // 境外输入
          this.total_outside += item.outside
        })

        // 处理上海市
        var total_shanghai = res.data.data.list.filter((item)=>{
          return item.province == '上海市'
        })
        var severe_shanghai = 0
        total_shanghai.forEach((item)=>{
          severe_shanghai += item.severe
        })
        // 处理北京市
        var total_beijing = res.data.data.list.filter((item)=>{
          return item.province == '北京市'
        })
        var severe_beijing = 0
        total_beijing.forEach((item)=>{
          severe_beijing += item.severe
        })
        // 处理江苏省
        var total_jiangsu = res.data.data.list.filter((item)=>{
          return item.province == '江苏省'
        })
        var severe_jiangsu = 0
        total_jiangsu.forEach((item)=>{
          severe_jiangsu += item.severe
        })
        // 封装柱状图的数据
        this.bar_data = {
          name:[total_shanghai[0].province,total_beijing[0].province,total_jiangsu[0].province],
          value:[severe_shanghai,severe_beijing,severe_jiangsu]
        }
      })
    },
    // 浏览人数
    all_looks() {
      axios.get('/api/sop/api/epidemic').then((res)=>{
        this.looks = res.data.data.epidemic
      })
    },
    // 登录
    login() {
      var params = {
        username:'admin',
        password:123321
      }
      axios({
        url:'http://39.96.21.48:8001/user/login',
        method:'POST',
        data:params
      }).then((res)=>{
        // console.log(res,'-----')
        // console.log(res.data,'-----')
        // console.log(res.data.data,'-----')
        // console.log(res.data.data.token,'-----')
        // 将token存储到浏览器
        localStorage.setItem('token',res.data.data.token);
      })
    },
    // 国家的切换
    countryChange(name,title) {
      // if(title == '国内疫情') {

      // } else {

      // }

      if(name == 0) {
        // 显示国内疫情
        // 通过v-if/v-show来控制元素的显示和隐藏
        this.tag_ = true;
      } else {
        // 显示国外疫情
        this.tag_ = false;
      }
    }
  }
}
</script>

// 样式代码
<style scoped>
  .wrap >>> .van-row:first-child .van-col {
    background-color: #f5f6f7;
  }
  .data_table >>> .van-row:first-child {
    background-color: white;
  } 
  /* 除了第一行之外的所有行，下面的第一列 */
  .wrap >>> .van-row:not(:first-child) .van-col:first-child {
    background-color: #00bec9;
    color:white;
  }
  .data_table >>> .van-col {
    padding: 5px;
    text-align: center;
  }
  .data_table >>> .van-row {
    background-color: #f5f6f7;
    border-radius: 5px;
    text-align: center;
    margin-bottom: 5px;
  }
  .table_tag {
    color: #999;
    font-size: 14px;
    margin-top: 5px;
    margin-bottom: 15px;
  }
  .data_table {
    padding: 0 10px;
  }
  .china_map >>> .van-tabs__line {
    height: 0;
  }
  .china_map >>> .van-tab--active {
    background-color: white;
    margin: 3px;
    border-radius: 5px;
  }
  .china_map >>> .van-tabs__wrap {
    border-radius: 5px;
  }
  .china_map >>> .van-tabs__nav {
    background-color: #e3e6eb;
    border-radius: 5px;
  }
  .china_map {
    padding:10px;
  }
  .data_list .van-row:first-child {
    margin-bottom: 15px;
  }
  .data_list .van-row .van-col div {
    text-align: center; /* 文字水平居中 */
  }
  .num_color {
    color:#ff6a57;
  }
  #app >>> .van-grid-item__content::after,
  #app >>> .van-grid::after {
    border: none;
  }
  .data_list {
    margin-top: 35px;
  }
  .end_time div:nth-child(2) div:nth-child(2) {
    float: right;
  }
  .end_time div:nth-child(2) div:first-child {
    float: left;
  }
  .end_time div:nth-child(2) {
    font-size: 14px;
    color:#999;
  }
  .end_time {
    margin: 20px; /* 外边距 */
  }
  .end_time div:first-child {
    font-weight: 700; /* 字体粗细 */
  }
  /* 选中滑块的样式 */
  #app >>> .van-tabs__line { /* 深度选择器，用于更改第三方组件的样式 */
    background-color: #10aeb5;
  }
  .toArea span {
    float: left; /* 左浮动 */
  }
  .toArea i {
    background-image: url('https://mms-res.cdn.bcebos.com/mms-res/voicefe/captain/mola/Virus/1.1.287/assets/arrow-expand.62b1a23.svg');
    background-size: 100% 100%; /* 图片的大小占满容器 */
    width: 10px;
    height: 28px;
    display: inline-block; /* 给行内元素设置宽高的前提 */
  }
  .toArea {
    position: absolute;
    top: 8%;
    right: 17px;
    display: inline-block;
    max-width: 90px;
    height: 28px;
    padding: 0 10px;
    line-height: 28px;
    opacity: .76;
    background: #e5feff;
    border-radius: 51px;
    text-align: center;
    font-size: 14px;
    color: #104345;
  }
  .looks {
    position: absolute; /* 绝对定位 */
    top:70%;
    left:5%;
    font-size:12px; /* 字体大小 */
    color: white; /* 字体颜色 */
    background-color: rgba(9,148,167,.5);
    border-radius: 10px; /* 边框圆角 */
    padding:5px; /* 内边距 */
  }
  .desc_data {
    position: absolute; /* 绝对定位 */
    top:50%;
    left:5%;
    font-size:24px; /* 字体大小 */
    color: white; /* 字体颜色 */
    font-weight: 800; /* 字体粗细 */
  }
  .desc {
    position: absolute; /* 绝对定位 */
    top:36%;
    left:5%;
    font-size:16px; /* 字体大小 */
    color: white; /* 字体颜色 */
  }
  .logo {
    background-image: url('https://mms-res.cdn.bcebos.com/mms-res/voicefe/captain/images/76dcfc708847fdeff3d2ca67fc26419d.png?size=244*84');
    height: 28px;
    width:80px;
    background-size: 100% 100%;
    position: absolute; /* 绝对定位 */
    top:8%;
    left:5%;
  }
  .header {
    height:210px;
    background-image: url('https://mms-res.cdn.bcebos.com/mms-res/voicefe/captain/mola/Virus/1.1.287/assets/bg-header.840c435.jpg'); /* 背景图片 */
    background-size: 100% 100%; /* 图片的大小占满容器 */
    position: relative; /* 相对定位 */
  }
</style>